<template>
<div>
    <!-- 动画样式实现 -->
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 想让一刷新就开始动画效果，添加appear为true，前面不加:会被解析成字符串"true"，控制台报错，可以直接简写appear -->
    <transition name="hello" :appear="true">
        <h1 v-show="isShow">你好啊！</h1>
    </transition>
</div>
</template>

<script>

export default {
    name:'VueTest',
    data() {
        return {
            isShow:true
        };
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
    }

    /* 进入时要激活的样式 */
    /* .v-enter-active{ 如果上面transition没有定义name值，默认用v，如果指定了name="hello"，就要用hello开头*/
    .hello-enter-active{
        animation: donghua1 1s linear;
        background-color: yellow;
    }
    .hello-leave-active{
        animation: donghua1 1s linear reverse;
        background-color: blue;
    }
    /* 定义关键帧--起一个名字 */
    @keyframes donghua1{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>